<!-- filepath: c:\Users\HH\Desktop\旅游定制\src\components\Header.vue -->
<template>
  <el-header class="header" :class="{ 'header-scrolled': isScrolled }">
    <div class="container header-container">
      <div class="logo">
        <el-icon class="logo-icon"><Place /></el-icon>
        <router-link to="/" class="logo">川西旅游定制</router-link>
      </div>

      <nav class="nav-menu" :class="{ active: showMobileMenu }">
        <el-menu
          :default-active="activeIndex"
          mode="horizontal"
          :ellipsis="false"
          @select="handleSelect"
          class="main-menu"
        >
          <el-menu-item
            v-for="item in menuItems"
            :key="item.index"
            :index="item.index"
          >
            {{ item.title }}
          </el-menu-item>
        </el-menu>
      </nav>

      <div class="nav-buttons">
        <el-button type="primary" round @click="$router.push('/consult')"
          >预约咨询</el-button
        >
        <div class="mobile-menu-btn" @click="toggleMobileMenu">
          <el-icon v-if="!showMobileMenu"><Menu /></el-icon>
          <el-icon v-else><Close /></el-icon>
        </div>
      </div>
    </div>
  </el-header>
</template>

<script>
export default {
  name: "HeaderNav",
  data() {
    return {
      activeIndex: "1",
      showMobileMenu: false,
      isScrolled: false,
      menuItems: [
        { index: "1", title: "首页", path: "/" },
        { index: "2", title: "目的地", path: "/destinations" },
        { index: "3", title: "精品路线", path: "/routes" },
        { index: "4", title: "私人定制", path: "/customize" },
        { index: "5", title: "旅行故事", path: "/stories" },
      ],
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    this.initActiveMenu();
    // 监听路由变化关闭菜单
    this.$router.afterEach(() => {
      this.showMobileMenu = false;
      document.body.style.overflow = "";
    });
  },
  methods: {
    initActiveMenu() {
      const currentPath = this.$route?.path || "/";
      const currentItem = this.menuItems.find(
        (item) => item.path === currentPath
      );
      if (currentItem) {
        this.activeIndex = currentItem.index;
      }
    },
    handleSelect(key) {
      const selectedItem = this.menuItems.find((item) => item.index === key);
      if (selectedItem) {
        this.$router.push(selectedItem.path);
      }
      this.showMobileMenu = false;
    },
    toggleMobileMenu() {
      this.showMobileMenu = !this.showMobileMenu;
      // 防止菜单打开时页面滚动
      document.body.style.overflow = this.showMobileMenu ? "hidden" : "";
    },
    handleScroll() {
      this.isScrolled = window.scrollY > 50;
    },
  },
  watch: {
    $route: {
      handler(to) {
        const currentItem = this.menuItems.find(
          (item) => item.path === to.path
        );
        if (currentItem) {
          this.activeIndex = currentItem.index;
        }
      },
      immediate: true,
    },
  },
  beforeUnmount() {
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>

<style scoped>
.header {
  position: fixed; /* 改为 fixed 定位 */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 60px; /* 修改导航栏高度 */
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.header-scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.logo {
  font-size: 1.5rem; /* 调小logo字体 */
  font-weight: 700;
  background: linear-gradient(45deg, var(--primary-color), #36cfc9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

.logo-icon {
  font-size: 1.5rem; /* 调小图标大小 */
}

.main-menu {
  border: none;
  background: transparent;
}

.el-menu-item {
  font-size: 1rem; /* 调小菜单字体 */
  font-weight: 500;
  height: 60px; /* 匹配导航栏高度 */
  line-height: 60px; /* 匹配导航栏高度 */
  padding: 0 28px;
  letter-spacing: 1px;
}

/* 移除图标相关样式 */
.el-menu-item .el-icon {
  display: none;
}

.el-menu-item.is-active {
  color: var(--primary-color) !important;
  font-weight: 600;
}

.nav-buttons {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-buttons .el-button {
  padding: 8px 20px; /* 调整按钮大小 */
  font-weight: 500;
  border-radius: 24px;
  transition: var(--transition);
}

.mobile-menu-btn {
  display: none;
  font-size: 24px;
  cursor: pointer;
}

@media (max-width: 992px) {
  .nav-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-height));
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    padding: 20px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
  }

  .nav-menu.active {
    transform: translateX(0);
  }

  .main-menu {
    flex-direction: column;
    width: 100%;
    border: none;
  }

  .el-menu-item {
    text-align: center;
    height: 50px;
    line-height: 50px;
    margin: 5px 0;
    border-radius: var(--border-radius);
  }

  .el-menu-item:hover,
  .el-menu-item.is-active {
    background: var(--light-bg);
  }

  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 24px;
    cursor: pointer;
    margin-left: 15px;
    border-radius: 50%;
    transition: background-color 0.3s;
  }

  .mobile-menu-btn:hover {
    background: var(--light-bg);
  }
}

@media (max-width: 576px) {
  .header {
    height: var(--header-height-mobile);
  }

  .logo {
    font-size: 1.2rem;
  }

  .nav-menu {
    top: var(--header-height-mobile);
    height: calc(100vh - var(--header-height-mobile));
  }

  .nav-buttons .el-button {
    padding: 6px 12px;
    font-size: 0.9rem;
  }

  .mobile-menu-btn {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
}

.header {
  height: var(--header-height);
}

@media (max-width: 768px) {
  .header {
    height: var(--header-height-mobile);
  }

  .nav-menu {
    position: fixed;
    top: var(--header-height-mobile);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.98);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 999;
    padding: 20px 0;
    overflow-y: auto;
  }

  .nav-menu.active {
    transform: translateX(0);
  }

  .nav-buttons .el-button {
    padding: 6px 12px;
    font-size: 0.9rem;
  }

  .mobile-menu-btn {
    margin-left: 10px;
  }

  .logo {
    font-size: 1.2rem;
  }
}
</style>
